<template>
  <div class="me-wrapper">
    <div class="me-top-wrapper">
        <div class="me-top">
            <van-icon name="chat-o" info="5" size="20px" />
            <van-icon
              name="setting-o"
              size="20px"
              class="icon"
              @click="toSetting"
            />
        </div>
    </div>
    <div class="me-middle-warpper">
        <div class="userInfo-img">
            <img src="https://img.zcool.cn/community/0156e05e0dc5c4a80120a895105da8.jpg@1280w_1l_2o_100sh.jpg" alt="" style="width: 100%; height: 100%;">
        </div>
        <div class="userInfo-text">
            <h3>温柔的长颈鹿</h3>
            <p>关注 100</p>
        </div>
    </div>
    <div class="me-bottom-wrapper">
        <div class="flex-img">
            <i class="yellow-circle"></i>
            <span class="iconfont">&#xe609;</span>
            <span class="text">购物车</span>
        </div>
        <div class="flex-img">
            <i class="yellow-circle"></i>
            <span class="iconfont">&#xe60a;</span>
            <span class="text">订单</span>
        </div>
        <div class="flex-img">
            <i class="yellow-circle"></i>
            <span class="iconfont">&#xe608;</span>
            <span class="text center">送礼提醒</span>
        </div>
        <div class="flex-img">
            <i class="yellow-circle"></i>
            <span class="iconfont">&#xe61f;</span>
            <span class="text">收藏</span>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    toSetting () {
      this.$router.push('/pages/setting/main')
    }
  }
}
</script>

<style lang="scss" scoped>
.me-wrapper {
    height: 180px;
    .me-top-wrapper {
        margin-top: 10px;
        height: 20px;
        width: 100%;
        .me-top {
            margin-right: 10px;
            float: right;
            .icon {
                margin-left: 20px;
            }
        }
    }
    .me-middle-warpper {
        width: 100%;
        height: 80px;
        // background-color: green;
        position: relative;
        .userInfo-img {
            display: inline-block;
            background-color: #ccc;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            overflow: hidden;
            margin: 10px;
        }
        .userInfo-text {
            position: absolute;
            top: 20px;
            left: 80px;
            display: inline-block;
            // background-color: blue;
            display: flex;
            flex-direction: column;
            h3 {
                display: inline-block;
                flex: 3;
                font-weight: 700;
            }
            p {
                display: inline-block;
                flex: 2;
                font-size: 16px;
                color: #ccc;
            }
        }
    }
    .me-bottom-wrapper {
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .flex-img {
            flex: 1;
            margin-left: 30px;
            position: relative;
            .iconfont {
                font-size: 28px;
                z-index: 999;
                position: absolute;
                bottom: -15px;
            }
            .text {
                font-size: 14px;
                color: #ccc;
                position: absolute;
                top: 20px;
            }
            .center {
                left: -10px;
            }
            .yellow-circle {
                display: inline-block;
                width: 15px;
                height: 15px;
                background-color: #FFD500;
                position: absolute;
                left: 13px;
                top: -10px;
                border-radius: 50%;
            }
        }
    }
}
</style>
